<template>
  <div class="app-container">
    <div class="cardBox">
      <el-button
        @click="gobackWay"
        type="text"
        icon="el-icon-arrow-left"
        style="color: rgba(0, 0, 0, 0.85)"
        >返回</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <span>添加/编辑（{{ title }}）</span>
      <!-- <el-button
        style="float: right"
        type="primary"
        size="small"
        @click="addDictionaryWay"
        icon="el-icon-circle-plus-outline"
        >添加字典内容</el-button
      > -->
    </div>
    <div
      class="cardBox"
      style="height: calc(85vh - 80px); margin-top: 20px"
      v-loading="loading"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in agreementList"
          :key="index"
          :label="item.version"
          :name="item.version"
        >
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex">
        <div style="width: 70%">
          <!-- <tinymce-editor
            v-if="formContentBool"
            v-model="form.content"
            :height="550"
          /> -->
          <editor-text v-model="form.content" :height="550" />
        </div>
        <div style="flex: 1">
          <div
            id="phone"
            style="
              width: 275px;
              height: 555px;
              border: 2px solid rgb(59, 59, 59);
              border-radius: 30px;
              margin: 10px auto;
              background: rgb(46, 46, 46);
            "
          >
            <div
              class="tingtong"
              style="
                width: 120px;
                height: 8px;
                border: 2px solid rgb(80, 80, 80);
                background: rgb(26, 26, 26);
                border-radius: 10px;
                margin: 6px auto;
              "
            ></div>
            <div
              class="screen"
              style="
                height: 508px;
                width: 260px;
                background: #ffffff;
                border: 1px solid rgb(28, 28, 28);
                margin: 6px auto;
                padding: 5px;
              "
            >
              <el-scrollbar
                wrap-style="overflow-x:hidden;"
                style="height: 498px"
              >
                <div v-html="form.content"></div>
              </el-scrollbar>
            </div>
            <div
              class="btn"
              style="
                width: 70px;
                height: 17px;
                background: rgb(26, 26, 26);
                border-radius: 30px;
                margin: -2px auto;
              "
            ></div>
          </div>
        </div>
      </div>
      <el-row style="text-align: center; margin-top: 10px">
        <el-button type="primary" @click="submitWay">保存</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDictionaryTypeList } from "@/api/index";
import {
  getSysAgreementConfigList,
  SaveSysAgreement,
  getAgreementInfo,
} from "@/api/admin/agreement";
import TinymceEditor from "@/components/Tinymce";
export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      loading: true,
      id: "",
      valueId: "",
      activeName: "",
      agreementDetail: "1",
      agreementList: [],
      keyId: "",
      agreementClass: {},
      formContentBool: false,
      title: "",
      form: {
        id: "",
        content: "",
        version: "",
        status: 1,
        dictionary_value_id: "",
        dictionary_id: "",
      },
      datatemporarystorage: {},
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    if (this.$route.query.valueId) {
      this.valueId = this.$route.query.valueId;
    }
    const p1 = new Promise((req, rej) => {
      getAgreementInfo({ dictionary_value_id: this.valueId }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          rej();
          return;
        }
        this.agreementList = res.data;
        this.title = this.agreementList[0].dictionary_value_name;
        req();
      });
    });
    Promise.all([p1])
      .then(() => {
        this.loading = false;
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    getListWay() {
      if (this.id) {
        this.keyId = this.valueId;
      }
      this.formContentBool = false;
      this.agreementList.forEach((item) => {
        if (this.$route.query.id == item.id) {
          this.activeName = item.version;
          this.keyId = item.id;
          this.datatemporarystorage = JSON.parse(JSON.stringify(item));
          this.formContentBool = true;
          this.form = JSON.parse(JSON.stringify(item));
        }
      });
      this.loading = false;
    },
    submitWay() {
      var _this = this;
      if (!this.form.content) {
        return this.$messages.error("请输入协议内容");
      }
      this.$prompt(
        "请输入版本号(" +
          (this.form.version
            ? "当前版本号为:" + this.form.version
            : "没有版本号,请输入") +
          ")",
        "提示",
        {
          inputValue: this.form.version,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /[0-9.]/,
          inputErrorMessage: "版本号只能为数字和.组成",
        }
      )
        .then(({ value }) => {
          this.form.version = value;
          this.loading = true;
          SaveSysAgreement(this.form).then((res) => {
            this.loading = true;
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.loading = false;
            this.$confirm("保存成功, 是否返回列表?", "提示", {
              confirmButtonText: "继续编辑",
              cancelButtonText: "返回列表",
              type: "success",
            })
              .then(() => {
                this.getListWay();
              })
              .catch(() => {
                _this.gobackWay();
              });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
    handleClick(val) {
      this.formContentBool = false;
      this.loading = true;
      this.$nextTick(() => {
        this.agreementList.forEach((item) => {
          if (val.name == item.version) {
            this.activeName = item.version;
            this.keyId = item.id;
            this.datatemporarystorage = JSON.parse(JSON.stringify(item));
            this.formContentBool = true;
            this.form = JSON.parse(JSON.stringify(item));
            this.loading = false;
          }
        });
      });
    },
    contentcallback(e) {
      this.form.content = e;
    },
    addDictionaryWay() {
      this.$router.push("/admin/dictionary/subdictionary?parentId=17");
    },
    gobackWay() {
      this.$router.push("/admin/agreement");
    },
  },
};
</script>

<style lang="scss" scoped>
.btn:before {
  width: 8px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 30%;
  content: "";
  display: inline-block;
  margin-top: 0px;
  margin-left: 32px;
}
</style>